import Link from "next/link"
import classNames from "classnames"
import styles from './index.module.css'

interface OperateToolbarProps {
  actived: string
}

export default function OperateToolbar({
  actived
}:OperateToolbarProps) {
  return (
    <div className="flex justify-center pb-4 pt-4 h-[200px]">
      <ul className={classNames("grid grid-cols-3 max-w-[960px] space-x-8", styles.ulWraper)}>
        <li>
          <Link
          className={classNames("relative flex p-6 items-center justify-center", actived === 'company' && styles.actived)} 
          href={'/pages/abouts/company'}><i className="iconfont icon-quanbudingdan" /> 公司介绍</Link>
        </li>
        <li>
          <Link
          className={classNames("relative flex p-6 items-center justify-center", actived === 'letter' && styles.actived)} 
          href={'/pages/abouts/letter'}><i className="iconfont icon-duanxin" /> 董事长的一封信</Link>
        </li>
        <li>
          <Link
          className={classNames("relative flex p-6 items-center justify-center", actived === 'certifcate' && styles.actived)} 
          href={'/pages/abouts/certifcate'}><i className="iconfont icon-youhuiquan" /> 资质证书</Link>
        </li>
      </ul>
    </div>
  )
}